<template>
  <div id="personalData">
    <div class="persona_box">
      <div class="box_top">
        <div class="logo_box" v-if="person_message">
          <img :src="person_message.headImgUrl" v-if="person_message.headImgUrl" />
          <img v-else src="@/assets/meng/touxiang.png" />
        </div>
        <div class="right_box">
          <div>
            <p>
              {{ person_message.nickName }}
              <span v-if="person_message.bindType == 1">(主账号)</span>
              <span v-if="person_message.bindType == 2">(子账号)</span>
            </p>
            <p>
              <img
                v-if="person_message.vipLevel == 0"
                src="https://static.zsjx114.com/dy/image/b4.png"
              />
              <img v-if="person_message.vipLevel == 3" src="@/assets/meng/vipl1.png" />
              <img v-if="person_message.vipLevel == 4" src="@/assets/meng/vipl2.png" />
              <img v-if="person_message.vipLevel == 1" src="@/assets/meng/b5.png" />
              <img v-if="person_message.vipLevel == 5" src="@/assets/meng/b5.png" />
              <img v-if="person_message.vipLevel == 2" src="@/assets/meng/plus.png" />
              <span style="color:#555" v-if="person_message.vipLevel == 0">免费版用户</span>
              <span style="color:#555" v-if="person_message.vipLevel == 3">体验版</span>
              <span style="color:#555" v-if="person_message.vipLevel == 4">VIP-企业版</span>
              <span style="color:#555" v-if="person_message.vipLevel == 1">SVIP-企业版</span>
              <span style="color:#555" v-if="person_message.vipLevel == 5">SVIP-个人版{{autoVipFn()}}</span>
              <span style="color:#555" v-if="person_message.vipLevel == 2">Plus-企业版</span>
              <template v-if="!person_message.autoVipType">
                <span
                  v-if="person_message.vipEndTime&&person_message.vipLevel"
                >{{ person_message.vipEndTime1.substring(0, 10) }}到期</span>
              </template>
            </p>
          </div>
          <div class="renew_box" @click="Routinghop">
            续费/升级
            <img src="../../../assets/li/limit.png" alt />
          </div>
        </div>
      </div>
      <div class="phone_box">
        <div class="box_item">
          <div class="box_title">手机号</div>
          <div class="box_phone">已绑定{{ person_message.phone }}</div>
        </div>
      </div>
      <div class="phone_box">
        <div class="box_item box_item_02">
          <div class="box_title">微信绑定</div>
          <div class="box_right_02">
            <span class="box_phone">
              <span v-if="person_message.nickName != ''">
                已绑定微信
                <span class="nickName">{{ person_message.nickName }}</span>
              </span>
            </span>

            <span class="box_right_03" @click="bind_phone" v-if="person_message.nickName == ''">点击绑定</span>
            <span class="box_right_03" @click="wechatUnbind" v-if="person_message.nickName != ''">解绑</span>
          </div>
        </div>
      </div>
      <div class="phone_box">
        <div class="box_item box_item_02">
          <div class="box_title">登录密码</div>
          <div class="box_right_02">
            <span class="box_phone">
              <span>*******</span>
            </span>
            <span class="box_right_03" @click="alter_is = true">修改</span>
          </div>
        </div>
      </div>
      <!-- <div class="phone_box">
        <div class="box_item box_item_02">
          <div class="box_title">邀请好友</div>
          <div class="box_right_02">
            <span class="box_phone phone_cu">
              已邀请
              <span class="invite_num phone_cu">
                {{ person_message.invitationCount }}/{{
                person_message.invitationCountMax
                }}
              </span>
              <span class="invite_num invite_num_02" @click="invite_dialog = true">邀请规则</span>
            </span>
            <p class="invite_vip">
              <span>邀好友 得会员</span>
              <span @click="toInvite()">去邀请</span>
            </p>
          </div>
        </div>
      </div>
      <div class="phone_box">
        <div class="box_item box_item_02">
          <div class="box_title">获奖记录</div>
          <div class="box_right_02">
            <span class="box_phone"></span>
            <span
              class="box_right_03"
              @click="
                Awards_dialog = true;
                getList();
              "
            >查看</span>
          </div>
        </div>
      </div> -->
    </div>

    <!-- 绑定微信 -->
    <el-dialog :visible.sync="dialog01" width="500px" top="20vh" class="dialog02">
      <div class="bindWx">
        <p class="title01">扫码绑定微信</p>
        <p class="blueLine"></p>
        <div v-if="loading" class="imgLoadding">
          <div v-loading="loading" class="loadingInner"></div>
        </div>
        <img :src="wx_code" class="wxEwm" v-else />
        <!-- <p class="errMsg" v-if="errMsg">
          * 该微信号已被其他账户绑定，请变更其他微信号
        </p>-->
      </div>
    </el-dialog>
    <!-- 修改密码 -->
    <div class="login">
      <el-dialog
        :visible.sync="alter_is"
        width="440px"
        top="22.5vh"
        class="dialogLoginBox"
        :show-close="false"
        @open="open_default"
      >
        <div class="loginContainer">
          <div class="vx_box02">重置密码</div>
          <div class="tabContent">
            <div class="inputItem" style="margin-top: 37px;">
              <div class="inputBox">
                <i class="password_02"></i>

                <input
                  type="password"
                  v-model="old_password"
                  placeholder="请输入原密码"
                  @blur="check_old_password"
                  @keydown="keydown($event)"
                  @focus="
                    is_errOld_password = false;
                    is_errOld_null = false;
                    is_errOld_format = false;
                  "
                />
              </div>

              <p class="errMsg" v-if="is_errOld_password">原密码输入有误</p>
              <p class="errMsg" v-if="is_errOld_format">原密码格式错误</p>
              <p class="errMsg" v-if="is_errOld_null">原密码不能为空</p>
            </div>
            <div
              class="inputItem"
              :class="{
                is_top: is_errOld_password || is_errOld_format || is_errOld_null
              }"
            >
              <div class="inputBox">
                <i class="password_02"></i>
                <input
                  type="password"
                  v-model="new_password"
                  placeholder="请输入新密码"
                  @blur="check_new_password"
                  @keydown="keydown($event)"
                  @focus="
                    is_errNew_password = false;
                    is_errNew_null = false;
                  "
                />
              </div>

              <p class="errMsg" v-if="is_errNew_password">密码必须为8-24位数字、字母或符号组成</p>

              <p class="errMsg" v-if="is_errNew_null">新密码不能为空</p>
            </div>
            <div class="inputItem" :class="{ is_top: is_errNew_password || is_errNew_null }">
              <div class="inputBox">
                <i class="password_02"></i>

                <input
                  type="password"
                  v-model="new_password_two"
                  placeholder="请再次输入新密码"
                  @keydown="keydown($event)"
                  @blur="check_new_password_two"
                  @focus="
                    is_errNew_password_two = false;
                    is_null_password_two = false;
                  "
                />
              </div>

              <p class="errMsg" v-if="is_errNew_password_two">两次输入的密码不一致，请重新输入</p>
              <p class="errMsg" v-if="is_null_password_two">确认密码不能为空</p>
            </div>

            <div class="loginFooter">
              <button @click="modification()">确定修改</button>
              <p
                @click="
                  forget_is = true;
                  alter_is = false;
                "
              >
                <span>忘记密码？</span>
              </p>
            </div>
          </div>

          <img src="@/assets/wang/video/close.png" alt class="clone" @click="alter_is = false" />
        </div>
      </el-dialog>
    </div>
    <!-- 忘记，密码 -->
    <div class="login">
      <el-dialog
        :visible.sync="forget_is"
        width="440px"
        top="22.5vh"
        class="dialogLoginBox"
        :show-close="false"
      >
        <div class="loginContainer">
          <div class="vx_box02">忘记密码</div>
          <div class="tabContent">
            <div class="inputItem" style="margin-top: 37px;">
              <div class="inputBox">
                <i class="phone"></i>

                <input
                  type="number"
                  v-model="phone"
                  placeholder="请输入手机号"
                  @blur="checkPhone"
                  @keydown="keydown($event)"
                  @focus="
                    phone_format = false;
                    isShow_num = false;
                    isShow_user = false;
                  "
                />
              </div>

              <p class="errMsg" v-if="phone_format">手机号格式错误</p>
              <p class="errMsg" v-if="isShow_user">用户信息不存在</p>
              <p class="errMsg" v-if="isShow_num">手机号不能为空</p>
            </div>
            <div
              class="inputItem clear"
              :class="{ is_top: phone_format || isShow_num || isShow_user }"
              style=" display: flex;"
            >
              <div class="inputBox passwordBox">
                <i class="password"></i>
                <input
                  v-model="code"
                  @blur="checkCode"
                  @keydown="keydown($event)"
                  @focus="
                    isShow_code = false;
                    isShow_code_01 = false;
                    null_code = false;
                  "
                  placeholder="请输入验证码"
                  @keyup.enter="phone_login()"
                />
              </div>
              <button
                class="codeBtn"
                @click="get_code()"
                :class="{ timering: isTimering }"
                style="margin-left: 15px;"
              >
                <span>{{ time }}</span>
              </button>
              <p class="psdErrMsg errMsg" v-if="isShow_code_01">验证码格式输入错误，请重新输入</p>
              <p class="psdErrMsg errMsg" v-if="null_code">验证码不能为空</p>
              <p class="psdErrMsg errMsg" v-if="isShow_code">{{ msg }}</p>
            </div>
            <div
              class="inputItem"
              :class="{ is_top_02: isShow_code || isShow_code_01 || null_code }"
            >
              <div class="inputBox">
                <i class="password_02"></i>

                <input
                  type="password"
                  v-model="forget_password"
                  placeholder="请输入8-16位数字和字母或符号组成的密码"
                  @blur="forgetPassword"
                  @keydown="keydown($event)"
                  maxlength="24"
                  @focus="
                    one_password = false;
                    null_password = false;
                  "
                />
              </div>

              <p class="errMsg" v-if="one_password">密码必须由8-24位数字、字母或符号(至少两种)组成</p>
              <p class="errMsg" v-if="null_password">密码不能为空</p>
            </div>
            <div class="inputItem" :class="{ is_top: one_password || null_password }">
              <div class="inputBox">
                <i class="password_02"></i>

                <input
                  type="password"
                  v-model="forget_password_02"
                  placeholder="请再次输入密码"
                  @keydown="keydown($event)"
                  @blur="forgetPassword_02"
                  maxlength="24"
                  @focus="
                    two_password = false;
                    two_null_password = false;
                  "
                  @keyup.enter="complete()"
                />
              </div>

              <p class="errMsg" v-if="two_password">两次输入的密码不一致，请重新输入</p>
              <p class="errMsg" v-if="two_null_password">密码不能为空</p>
            </div>

            <div class="loginFooter">
              <button @click="complete()">完成</button>
              <!-- <p>
                登录即同意
                <span @click="go_to_page01('fifth')" btn>服务条款</span> 和
                <span @click="go_to_page01('sixth')" btn>隐私条款</span>
              </p>-->
            </div>

            <img src="@/assets/wang/video/close.png" alt class="clone" @click="forget_is = false" />
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 邀请规则 -->
    <div class="invite">
      <el-dialog
        :visible.sync="invite_dialog"
        width="519px"
        top="36.5vh"
        class="dialogLoginBox"
        :show-close="false"
        @open="open_default"
      >
        <div class="invite_box">
          <div class="top">
            <div class="title_box"></div>
            <div class="title">邀请规则</div>
          </div>
          <div class="center">
            <p>1. 首次参与邀请活动，24小时内邀请3人成功注册账户，可得7天同级别会员 (低于VIP级别用户邀请好友成功注册送VIP会员)</p>
            <p>2. 邀请好友成功注册所得奖励立即生效，奖励结束后恢复原会员状态</p>
            <p>3. 邀请3位好友成功注册后，每多邀请1位好友成功注册多送一天同级别会员</p>
            <p>4. 所得奖励可在邀请记录查看</p>
            <p>5. 子账户不享有邀请好友时长奖励</p>
          </div>
          <img src="@/assets/wang/video/close.png" alt class="clone" @click="invite_dialog = false" />
        </div>
      </el-dialog>
    </div>
    <!-- 邀请好友 -->
    <div class="friend">
      <el-dialog
        :visible.sync="friend_dialog"
        width="519px"
        top="36.5vh"
        class="dialogLoginBox"
        :show-close="false"
        @open="open_default"
      >
        <div class="friend_box">
          <div class="top_friend">
            <p></p>
            <div>邀请好友注册</div>
          </div>
          <p class="title" v-if="person_message.bindType==2">子账户不享有邀请好友时长奖励</p>
          <p
            class="title"
            v-if="person_message.invitationCount <person_message.invitationCountMax&&person_message.bindType!=2&&person_message.vipLevel1==0||person_message.invitationCount <person_message.invitationCountMax&&person_message.bindType!=2&&person_message.vipLevel1==3"
          >首次参与邀请活动，24小时内邀请3位好友成功注册掌上互动得7天vip会员</p>
          <p
            class="title"
            v-if="person_message.invitationCount <person_message.invitationCountMax&&person_message.bindType!=2&&person_message.vipLevel1!=0&&person_message.vipLevel1!=3"
          >首次参与邀请活动，24小时内邀请3人成功注册账户，可得7天同级别会员</p>

          <p
            class="title"
            v-if="person_message.invitationCount >=person_message.invitationCountMax&&person_message.bindType!=2"
          >邀请人数已达上限，继续邀请好友无时长奖励</p>
          <p class="title share">分享注册链接</p>
          <div class="link">
            <p>{{ invitecode }}</p>
            <button v-clipboard:copy="invitecode" @click="success">点击复制 转发好友</button>
          </div>
          <img src="@/assets/wang/video/close.png" alt class="clone" @click="friend_dialog = false" />
        </div>
      </el-dialog>
    </div>
    <!-- 获奖 -->
    <div class="Awards">
      <el-dialog
        :visible.sync="Awards_dialog"
        width="790px"
        top="11.5vh"
        class="dialogLoginBox"
        :show-close="false"
        @open="open_default"
      >
        <div class="Awards_box">
          <div class="top">
            <p></p>
            <p class="title">邀请好友注册</p>
          </div>
          <table class="table">
            <thead>
              <tr>
                <th>日期</th>
                <th>成功邀请好友</th>
                <th>获得奖励</th>
                <th>会员到期日</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in msgList" :key="index">
                <td>{{ item.createTime.slice(0, 10) }}</td>
                <td>{{ item.mobile }}</td>
                <td>{{ item.award }}</td>
                <td>{{ item.endTime.slice(0, 10) }}</td>
              </tr>
            </tbody>
          </table>
          <div class="zw" v-if="!msgList.length&&!msgListLoading">
            <img src="@/assets/liu/zw.png" />
            <p>暂无数据</p>
          </div>
          <!-- 分页 -->
          <div class="pageBox" v-if="msgList">
            <el-pagination
              background
              layout="prev, pager, next,jumper"
              :page-size="pageSize"
              :current-page="pageIndex"
              :total="count"
              @current-change="getList"
              :hide-on-single-page="true"
            ></el-pagination>
          </div>
          <img src="@/assets/wang/video/close.png" alt class="clone" @click="Awards_dialog = false" />
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import md5 from 'js-md5';
export default {
  props: {},
  data() {
    return {
      person_message: '',
      dialog01: false,
      loading: true,
      wx_code: '',
      loop: '',
      // 修改密码
      alter_is: false,
      // 原密码
      old_password: '',
      is_errOld_password: false,
      is_errOld_format: false,
      is_errOld_null: false,
      // 新密码
      new_password: '',
      is_errNew_password: false,
      is_errNew_null: false,
      // 确认密码
      new_password_two: '',
      is_errNew_password_two: false,
      is_null_password_two: false,
      // 忘记密码
      forget_is: false,
      // 手机号
      phone: '',
      phone_format: false,
      isShow_num: false,
      isShow_user: false,
      //验证码
      code: '',
      msg: '',
      null_code: false,
      isShow_code: false,
      isShow_code_01: false,
      // 密码
      forget_password: '',
      one_password: false,
      null_password: false,
      forget_password_02: '',
      two_password: false,
      two_null_password: '',
      // 验证码
      isTimering: false, //是否正在倒计时（用来区别展示倒计时的文字样式）
      time: '获取验证码',
      // 邀请好友
      invite_dialog: false,
      invitecode: '',
      // 邀请好友
      friend_dialog: false,
      // 获奖记录
      Awards_dialog: false,
      msgList: [],
      pageSize: 10,
      pageIndex: 1,
      count: 0,
      msgListLoading: false
    };
  },
  components: {},
  watch: {},
  created() {
    this.get_person();
    this.$watch('dialog01', (newValue, oldValue) => {
      clearInterval(this.loop);
    });
  },
  mounted() {},
  methods: {
    //获取个人信息
    get_person() {
      this.$axios({
        method: 'get',
        url: '/api/customer/getperson'
      })
        .then(response => {
          if (response.data.code == 0) {
            this.person_message = response.data.data;
            localStorage.setItem('photo', response.data.data.headImgUrl);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 解绑
    wechatUnbind() {
      let that = this;
      that.$axios
        .get(
          '/api/customer/WechatUnbind',
          {
            params: {
              mobile: that.person_message.phone
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel();
              }
              that.cancel = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.get_person();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 绑定微信
    bind_phone() {
      let that = this;
      this.dialog01 = true;
      this.loading = true;
      this.$axios({
        method: 'get',
        url: '/api/customer/getLoginQrcode'
      })
        .then(response => {
          if (response.data.code == 0) {
            this.wx_code = response.data.data.url;
            this.loading = false;
            this.loop = setInterval(() => {
              this.$axios({
                method: 'get',
                url: '/api/customer/checkLogin',
                params: {
                  sessionId: response.data.data.sessionId,
                  // sessionId: "123456",
                  mobile: this.person_message.phone,
                  qrType: 1
                }
              })
                .then(response => {
                  if (response.data.code == 0) {
                    clearInterval(this.loop);

                    that.dialog01 = false;
                    that.get_person();
                  } else if (response.data.code == -2) {
                    // 该微信绑定过其他手机号
                    clearInterval(this.loop);

                    that.dialog01 = false;
                    this.$message({
                      message: '该微信号已被其他账户绑定，请变更其他微信号',
                      type: 'error',
                      duration: 2000,
                      offset: '400'
                    });
                  }
                })
                .catch(error => {
                  clearInterval(this.loop);
                  console.log(error);
                });
            }, 1000);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 续费跳转
    Routinghop() {
      // let router = this.$router.resolve({
      //   path: '/talent_main/buy'
      // });
      // window.open(router.href, '_blank');
      this.$router.push('/talent_main/buy');
    },
    success() {
      this.$message({
        message: '复制成功！',
        type: 'success',
        duration: 2000
      });
    },
    //==================修改密码==================//
    // 原密码失焦点
    check_old_password() {
      if (!this.old_password) {
        this.is_errOld_null = true;
        this.is_errOld_password = false;
        this.is_errOld_format = false;
      }
      if (this.old_password) {
        var reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{8,24}$/;
        if (!reg.test(this.old_password)) {
          console.log('ccc');
          this.is_errOld_format = true;
        }
      }
    },
    // 新密码失去焦点
    check_new_password() {
      if (!this.new_password) {
        this.is_errNew_null = true;
        this.is_errNew_password = false;
      }
      if (this.new_password) {
        var reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{8,24}$/;
        if (!reg.test(this.new_password)) {
          this.is_errNew_password = true;
        }
      }
    },
    // 确认密码失去焦点
    check_new_password_two() {
      if (!this.new_password_two) {
        this.is_errNew_password_two = false;
        this.is_null_password_two = true;
      }
      if (this.new_password_two) {
        if (this.new_password != this.new_password_two) {
          this.is_errNew_password_two = true;
        }
      }
    },
    // 确认修改
    modification() {
      // 旧密码
      if (!this.old_password) {
        this.is_errOld_null = true;
        this.is_errOld_password = false;
        this.is_errOld_format = false;
      }
      if (this.old_password) {
        var reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{8,24}$/;
        if (!reg.test(this.old_password)) {
          this.is_errOld_format = true;
        }
      }
      //新密码
      if (!this.new_password) {
        this.is_errNew_null = true;
        this.is_errNew_password = false;
      }
      if (this.new_password) {
        var reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{8,24}$/;
        if (!reg.test(this.new_password)) {
          this.is_errNew_password = true;
        }
      }
      // 确认密码
      if (!this.new_password_two) {
        this.is_errNew_password_two = false;
        this.is_null_password_two = true;
      }
      if (this.new_password_two) {
        if (this.new_password != this.new_password_two) {
          this.is_errNew_password_two = true;
        }
      }

      if (
        !this.is_errOld_null &&
        !this.is_errOld_password &&
        !this.is_errOld_format &&
        !this.is_errNew_password_two &&
        !this.is_null_password_two &&
        !this.is_errNew_null &&
        !this.is_errNew_password &&
        this.new_password_two &&
        this.new_password &&
        this.old_password
      ) {
        this.$axios
          .post('/api/customer/UpdatePassword', {
            OldPassword: md5(this.old_password), //旧密码
            NewPassword: md5(this.new_password) //新密码
          })
          .then(res => {
            if (res.data.code == 1001) {
              this.is_errOld_password = true;
            }
            if (res.data.code == 0) {
              this.$message({
                message: '修改成功！',
                type: 'success',
                duration: 1500,
                offset: '400'
              });

              this.alter_is = false;
            }
          });
      }
    },
    //==================忘记密码==================//
    //手机号是去焦点
    checkPhone() {
      if (!this.phone) {
        this.phone_format = false;
        this.isShow_user = false;
        this.isShow_num = true;
      }
      if (this.phone) {
        const str =
          /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
        if (!str.test(this.phone)) {
          this.phone_format = true;
        }
      }
    },
    // 验证码失去焦点
    checkCode() {
      if (this.code) {
        if (this.code.length != 6) {
          this.isShow_code_01 = true;
        }
      }
      if (!this.code) {
        this.isShow_code = false;
        this.isShow_code_01 = false;
        this.null_code = true;
      }
    },
    //密码失去焦点
    forgetPassword() {
      if (!this.forget_password) {
        this.null_password = true;
        this.one_password = false;
      }
      if (this.forget_password) {
        var reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{8,24}$/;
        if (!reg.test(this.forget_password)) {
          this.one_password = true;
        }
      }
    },
    // 确认密码失去焦点
    forgetPassword_02() {
      if (!this.forget_password_02) {
        this.two_password = false;
        this.two_null_password = true;
      }
      if (this.forget_password_02) {
        if (this.forget_password != this.forget_password_02) {
          this.two_password = true;
        }
      }
    },
    // 完成
    complete() {
      // 完成判断手机号
      if (!this.phone) {
        this.phone_format = false;
        this.isShow_user = false;
        this.isShow_num = true;
      }
      if (this.phone) {
        const str =
          /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
        if (!str.test(this.phone)) {
          this.phone_format = true;
        }
      }
      // 完成判断验证码
      if (this.code) {
        if (this.code.length != 6) {
          this.isShow_code_01 = true;
        }
      }
      if (!this.code) {
        this.isShow_code = false;
        this.isShow_code_01 = false;
        this.null_code = true;
      }
      // 完成判断密码
      if (!this.forget_password) {
        this.null_password = true;
        this.one_password = false;
      }
      if (this.forget_password) {
        var reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{8,24}$/;
        if (!reg.test(this.forget_password)) {
          this.one_password = true;
        }
      }
      // 确认密码
      if (!this.forget_password_02) {
        this.two_password = false;
        this.two_null_password = true;
      }
      if (this.forget_password_02) {
        if (this.forget_password != this.forget_password_02) {
          this.two_password = true;
        }
      }
      if (
        this.phone &&
        !this.phone_format &&
        this.code &&
        !this.isShow_code &&
        !this.isShow_code_01 &&
        !this.null_code &&
        this.forget_password &&
        !this.one_password &&
        this.forget_password == this.forget_password_02
      ) {
        this.$axios
          .post('/api/customer/SetUpPassword', {
            Mobile: this.phone,
            Password: md5(this.forget_password),

            Code: this.code
          })
          .then(res => {
            if (res.data.code == 0) {
              this.$message({
                message: '密码修改成功！',
                type: 'success',
                duration: 2000,
                offset: '400'
              });
              this.forget_is = false;
            } else {
              this.isShow_code = true;
              this.msg = res.data.msg;
            }
          });
      }
    },
    // 打开弹窗恢复默认值
    open_default() {
      // 原密码
      this.old_password = '';
      this.is_errOld_password = false;
      this.is_errOld_format = false;
      this.is_errOld_null = false;
      // 新密码
      this.new_password = '';
      this.is_errNew_password = false;
      this.is_errNew_null = false;
      // 确认密码
      this.new_password_two = '';
      this.is_errNew_password_two = false;
      this.is_null_password_two = false;

      // =====忘记密码==== //
      // 手机号
      this.phone = '';
      this.phone_format = false;
      this.isShow_num = false;
      this.isShow_user = false;
      //验证码
      this.code = '';
      this.msg = '';
      this.null_code = false;
      this.isShow_code = false;
      this.isShow_code_01 = false;
      // 密码
      this.forget_password = '';
      this.one_password = false;
      this.null_password = false;
      this.forget_password_02 = '';
      this.two_password = false;
      this.two_null_password = '';
      // 验证码
      this.isTimering = false; //是否正在倒计时（用来区别展示倒计时的文字样式）
      this.time = '获取验证码';
    },
    // 获取验证码
    get_code() {
      let that = this;
      if (this.time != '重新获取' && this.time != '获取验证码') {
        return false;
      }
      const str = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
      if (!str.test(this.phone) && this.phone.length != 0 && this.phone.length != 11) {
        that.phone_format = true;
        return;
      }
      if (!str.test(this.phone) && this.phone.length == 0) {
        this.isShow_num = true;
      }
      if (str.test(this.phone)) {
        that.getsmsCode();
      }

      // if (codeType == 1) {
      //   that.$axios
      //     .get("/api/customer/VerifyMobile", {
      //       params: {
      //         mobile: that.phone
      //       }
      //     })
      //     .then(res => {
      //       if (res.data.code == 0) {
      //         that.getsmsCode();
      //       } else if (res.data.code == 1) {
      //         that.errMsg = 3;
      //         return false;
      //       }
      //     })
      //     .catch(err => {
      //       console.log(err);
      //     });
      // } else {
      //   if (!this.note_code_03) {
      //     that.getsmsCode();
      //   }
      // }
    },

    getsmsCode() {
      let that = this;
      let temp = 60;
      this.time = temp + 's';
      this.isTimering = true;
      this.loopTime = setInterval(() => {
        temp -= 1;
        this.time = temp + 's';
        if (temp == 0) {
          clearInterval(this.loopTime);
          this.time = '重新获取';
          this.isTimering = false;
        }
      }, 1000);
      //   获取验证码
      this.$axios(
        {
          method: 'get',
          url: '/api/customer/getsms',
          params: {
            mobile: that.phone
          }
        },
        {
          cancelToken: new that.$axios.CancelToken(function executor(c) {
            if (that.cancel03) that.cancel03();
            that.cancel03 = c;
          })
        }
      )
        .then(response => {
          if (response.data.code == 0 && response.data.data == '') {
            this.register = true;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 禁止输入空格
    keydown(e) {
      if (e.keyCode == 32) {
        e.returnValue = false;
      }
    },
    go_to_page01(parm) {
      // let str = `http://www.zsjx114.com/aboutUs?tabName=${parm}`
      let str = `https://www.adzshd.com/aboutUs?tabName=${parm}`;
      window.open(str, '_blank');
    },
    // 获奖记录
    getList(spage) {
      this.msgListLoading = true;
      this.msgList = [];
      if (spage) {
        this.pageIndex = spage;
      }
      this.$axios({
        method: 'get',
        url: '/api/customer/getInvitationAward',
        params: {
          page: this.pageIndex,
          size: this.pageSize
        }
      }).then(res => {
        this.msgListLoading = false;
        if (res.data.code == 0) {
          this.count = res.data.count;
          this.msgList = res.data.data;
        }
      });
    },
    // 去邀请
    toInvite() {
      this.friend_dialog = true;
      this.$axios.get('/api/customer/GetInviterCode').then(res => {
        if (res.data.code == 0) {
          this.invitecode = 'https://' + location.host + '/?invitecode=' + res.data.data.invitecode;
        }
      });
    },
    autoVipFn(){
      if(this.person_message.vipLevel == 5 && this.person_message.autoVipType){
        let durationName = '';
        if(this.person_message.duration == 12){
          durationName = '年';
        }else if(this.person_message.duration == 3){
          durationName = '季';
        }else{
          durationName = '月';
        }
        return `(连续包${durationName})`;
      }
    }
  },
  computed: {}
};
</script>

<style scoped lang="less">
#personalData {
  padding-top: 100px;
  .persona_box {
    width: 800px;
    height: 500px;
    margin: auto;
    .box_top {
      width: 800px;
      height: 127px;
      border-radius: 10px;
      background-image: url('../../../assets/li/vip_image.png');
      display: flex;
      align-items: center;

      .logo_box {
        width: 68px;
        height: 68px;
        margin-left: 30px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .right_box {
        display: flex;
        justify-content: space-between;
        flex: 1;
        align-items: center;
        margin-left: 13px;
        p:nth-child(1) {
          margin-bottom: 12px;
          font-size: 16px;
          font-weight: normal;
          color: #ffffff;

          span {
            display: inline-block;
            font-size: 14px;
            font-weight: normal;
            color: #ffffff;
            opacity: 0.8;
            margin-left: 5px;
          }
        }
        p:nth-child(2) {
          line-height: 16px;
          img {
            width: 19px;
            height: 14px;
            margin-bottom: 4px;
          }
          span {
            font-size: 16px;
            font-weight: 600;
            background-image: -webkit-linear-gradient(top, #feeee0, #fdcda5);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          span:last-of-type {
            font-size: 14px;
            font-weight: 400;
            display: inline-block;
            margin-left: 10px;
            background-image: -webkit-linear-gradient(top, #feeee0, #fdcda5);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
        .renew_box {
          cursor: pointer;
          width: 109px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          margin-right: 47px;
          border-radius: 20px;
          font-size: 16px;
          font-weight: normal;
          color: #222222;
          background-image: url('../../../assets/li/renew.png');
          position: relative;
          img {
            position: absolute;
            top: -30px;
            left: 35px;
          }
        }
      }
    }
    .phone_box {
      margin-top: 20px;
      padding-left: 20px;
      height: 65px;
      border-bottom: 1px solid #e5e5e5;
      .box_item {
        line-height: 65px;
        display: flex;
        .box_title {
          display: inline-block;
          width: 60px;
          margin-right: 50px;
          font-size: 14px;
          font-weight: normal;
          color: #222222;
          white-space: nowrap;
        }
        .box_phone {
          font-size: 14px;
          font-weight: normal;
          color: #888888;
          .nickName {
            margin-left: 5px;
          }
        }
        .invite_num {
          font-size: 14px;
          font-weight: normal;
          color: #fd7f2c;
          cursor: pointer;
        }
        .invite_num_02 {
          margin-left: 10px;
        }
        .invite_vip {
          padding-right: 10px;
          span:nth-child(1) {
            font-size: 14px;
            font-weight: normal;
            color: #888888;
          }
          span:nth-child(2) {
            cursor: pointer;
            margin-left: 9px;
            width: 72px;

            border-radius: 15px;
            border: solid 1px #fd7f2c;
            font-size: 14px;
            font-weight: normal;
            color: #fd7f2c;
            padding: 6px 15px;
          }
        }
      }
      .box_item_02 {
        display: flex;
        .box_right_02 {
          display: flex;
          flex: 1;
          justify-content: space-between;
          .box_right_03 {
            margin-right: 25px;
            font-size: 14px;
            font-weight: normal;
            color: #fd7f2c;
            cursor: pointer;
          }
        }
      }
    }
  }
  .bindWx {
    width: 500px;
    min-height: 350px;
    background-color: #fff;
    border-radius: 20px;
    .title01 {
      font-size: 20px;
      color: #222222;
      text-align: center;
      padding-top: 40px;
    }
    .blueLine {
      width: 34px;
      height: 4px;
      background-color: #fd7f2c;
      border-radius: 2px;
      margin: 0 auto;
      margin-top: 5px;
    }
    .wxEwm {
      width: 180px;
      height: 180px;
      display: block;
      margin: 0 auto;
      margin-top: 16px;
    }
    .imgLoadding {
      width: 180px;
      height: 180px;
      margin: 0 auto;
      .loadingInner {
        padding-top: 166px;
      }
    }
  }
  .dialogLoginBox {
    background-color: rgba(0, 0, 0, 0.5);
  }
  .loginContainer {
    position: relative;
    min-height: 430px-80px;
    padding: 40px 50px;
    background-color: #fff;
    border-radius: 4px;
    .tabTitile {
      position: relative;
      margin-bottom: 36px;
      font-size: 0;
      border-bottom: 1px solid #efefef;
      color: #222;
      span {
        display: inline-block;
        width: 50%;
        padding-bottom: 7px;
        font-size: 20px;
        font-weight: bold;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
        letter-spacing: 1px;
        &.active {
          color: #fd7f2c;
        }
      }
      i {
        position: absolute;
        bottom: -1px;
        left: 0;
        display: block;
        width: 50%;
        height: 1px;
        background-color: #fd7f2c;
        transition: all linear 150ms;
        &.active {
          transform: translateX(100%);
        }
      }
    }

    .tabContent {
      .inputItem {
        position: relative;
        margin-top: 19px;

        &:first-child {
          margin-bottom: 0;
        }
      }
      .is_password {
        margin-top: 27px;
      }
      .inputBox {
        position: relative;
        &.passwordBox {
          // float: left;
          width: 245px;
        }
        i {
          position: absolute;
          left: 21px;
          top: 14px;
          display: inline-block;
          width: 14px;
          height: 17px;
          &:extend(.bgp);
          vertical-align: middle;
          &.phone {
            background-image: url('../../../assets/meng/login_phone.png');
            background-size: 100%;
          }
          &.password {
            background-image: url('../../../assets/li/safety.png');
            background-size: 100%;
          }
          &.password_02 {
            background-image: url('../../../assets/meng/login_password.png');
            background-size: 100%;
          }
        }
        input {
          display: inline-block;
          box-sizing: border-box;
          width: 100%;
          padding: 0 15px 0 49px;
          height: 45px;
          border: none;
          font-size: 14px;
          color: #222;
          border-radius: 4px;
          vertical-align: middle;
          border: 1px solid #e5e5e5;
          caret-color: #fd7f2c;
          &:focus {
            border: 1px solid #fd7f2c !important;
          }
        }
      }
      .codeBtn {
        // float: right;
        height: 45px;
        width: 101px;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        font-size: 14px;
        color: #222;
        &:hover {
          color: #fd7f2c;
        }
        &.timering {
          color: #888;
          &:hover {
            color: #888;
          }
        }
      }
      p {
        font-size: 12px;
        margin-top: 5px;
        &.psdErrMsg {
          position: absolute;
          margin-top: 0;
          bottom: -21px;
          left: 0;
        }
      }
      .is_top {
        margin-top: 7px;
      }
      .is_top_02 {
        margin-top: 25px;
      }
      .is_top_vx {
        margin-top: 25px;
      }
      .errMsg {
        font-size: 14px;
        color: #ea1b0b;

        margin-top: 2px;
      }
    }

    .loginFooter {
      padding-top: 50px;
      box-sizing: border-box;
      button {
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        height: 50px;
        margin-bottom: 10px;
        font-size: 16px;
        color: #fff;
        letter-spacing: 1px;
        background-color: #fd7f2c;
        border-radius: 4px;
        &:hover {
          background-color: #ff924b;
        }
      }
      p {
        font-size: 12px;
        color: #888;
        text-align: center;
        line-height: 30px;

        span {
          color: #ff924b;
          cursor: pointer;
        }
      }
    }
    .clone {
      position: absolute;
      right: 14px;
      top: 14px;
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
    .vx_box02 {
      padding-left: 18px;
      height: 40px;
      line-height: 40px;
      font-size: 20px;
      font-weight: 600;
      text-align: left;
      color: #222222;
      border-bottom: 1px solid #efefef;
      margin-top: 0px;
    }
  }
  .invite {
    .invite_box {
      position: relative;
      // height: 200px;
      padding: 30px;
      .top {
        display: flex;
        align-items: center;
        .title_box {
          width: 4px;
          height: 16px;
          background-color: #fd7f2c;
          border-radius: 2px;
        }
        .title {
          font-size: 16px;
          font-weight: 600;
          color: #222222;
          margin-left: 5px;
        }
      }
      .center {
        padding-top: 10px;
        font-size: 14px;
        font-weight: normal;
        color: #555555;
        p {
          line-height: 30px;
        }
      }
      img {
        width: 16px;
        height: 16px;
        position: absolute;
        top: 14px;
        cursor: pointer;
        right: 14px;
      }
    }
  }
  .friend {
    .friend_box {
      position: relative;
      padding: 30px;
      .top_friend {
        display: flex;
        align-items: center;
        p {
          width: 4px;
          height: 16px;
          background-color: #fd7f2c;
          border-radius: 2px;
        }
        div {
          margin-left: 5px;
          font-size: 16px;
          font-weight: 600;
          color: #222222;
        }
      }
      .title {
        font-size: 14px;
        font-weight: normal;
        margin-top: 11px;
        color: #888888;
      }
      .share {
        margin-top: 20px;
      }
      .link {
        margin-top: 10px;
        background-color: #f3f3f3;
        border-radius: 4px;
        padding: 18px 0px 20px;
        padding-top: 18px;
        padding-left: 20px;
        p {
          font-size: 14px;
          font-weight: normal;
          color: #222222;
        }
        button {
          width: 140px;
          height: 32px;
          background-color: #fd7f2c;
          border-radius: 4px;
          font-size: 14px;
          font-weight: normal;
          color: #ffffff;
          margin-top: 13px;
        }
        button:hover {
          background-color: #ff924b;
        }
      }
      img {
        width: 16px;
        height: 16px;
        position: absolute;
        top: 14px;
        cursor: pointer;
        right: 14px;
      }
    }
  }
  .Awards {
    .Awards_box {
      position: relative;
      padding: 30px 20px;
      height: 655px;
      .top {
        display: flex;
        align-items: center;
        p:nth-child(1) {
          width: 4px;
          height: 16px;
          background-color: #ff7500;
          border-radius: 2px;
        }
        p:nth-child(2) {
          margin-left: 5px;
          font-size: 16px;
          font-weight: 600;
          color: #222222;
        }
      }
      table {
        margin-top: 20px;
        tbody {
          tr {
            height: 50px;
            td {
              text-align: center;
            }
          }
        }
      }
      img {
        width: 16px;
        height: 16px;
        position: absolute;
        top: 14px;
        cursor: pointer;
        right: 14px;
      }
    }
  }
  .phone_cu {
    cursor: text !important;
  }
  .zw {
    width: 218px !important;
    height: 175px !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
    img {
      width: 218px !important;
      height: 175px !important;
      position: absolute;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
    }
    p {
      width: 100%;
      text-align: center;
      font-size: 14px;
      color: #b5b5b5;

      position: absolute;
      bottom: -10px;
    }
  }
}
</style>
